<template>
  <div class="h-full flex relative">
    <div class="flex-1 overflow-y-auto" ref="scrollContainer">
      <n-space vertical :size="16" class="p-4">
          
        <div
          class="mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-8 md:p-12"
          id="section-cover">
          <n-space vertical justify="space-between" class="h-full">
            <n-space vertical align="center" class="text-center">
              <div class="text-left w-full">附件2：</div>
              <n-space vertical :size="8" class="text-center">
                <h2 class="text-xl font-bold">优秀团员</h2>
                <h2 class="text-xl font-bold">作为入党积极分子及党的发展对象推荐表</h2>
              </n-space>
            </n-space>

            <n-space vertical align="center" :size="8">
              <n-space align="center">
                <span>学院（系）：</span>
                <span class="underline min-w-[120px] text-center">软件学院</span>
              </n-space>
              <n-space align="center">
                <span>团支部：</span>
                <span class="underline min-w-[120px] text-center">计算机类3001</span>
              </n-space>
              <n-space align="center">
                <span>姓名：</span>
                <span class="underline min-w-[120px] text-center">{{ member.memberName }}</span>
              </n-space>
              
              <n-space vertical align="center" :size="4" class="mt-8">
                <div>共青团东北大学委员会</div>
                <div class="flex items-center justify-center">
                  <n-tooltip v-if="getValidationInfo('formFillDate')" trigger="hover">
                    <template #trigger>
                      <n-icon :size="16" :color="getLevelColor(getValidationInfo('formFillDate').level)" class="mr-1.5">
                        <component :is="getIconComponent(getValidationInfo('formFillDate').level)" />
                      </n-icon>
                    </template>
                    <span>{{ getValidationInfo('formFillDate').message }}</span>
                  </n-tooltip>
                  {{ formFillDate }} 填写
                </div>
              </n-space>
            </n-space>
          </n-space>
        </div>

        <div id="section-instruction"
          class="mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-8 md:p-12">
          <n-space vertical class="h-full">
            <div class="text-center font-bold text-lg">说 明</div>
            <n-space vertical :size="4" class="text-sm">
              <div>1. 此表在每年团支部推优工作结束后由团支部负责填写。</div>
              <div>2. 发展学生党员，必须有本推荐表，经基层团委考核后，上报校团委盖章审核。</div>
              <div>3. 本表各栏如果填写不下，或有其他问题需要说明时可另附纸写出。</div>
              <div>4. 填写要求用钢笔或者毛笔，字迹要工整，不得随意涂改。</div>
              <div>5. 此表应由二级院（部）团委（团总支）妥善保管。</div>
              <div>6. 此表复印无效。</div>
            </n-space>
          </n-space>
        </div>

        <div id="section-basic-info"
          class="mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-4 md:p-6">
          <div class="border border-solid border-black h-fit">
            <table class="border-collapse h-full w-full">
              <tbody class="h-full">
                <tr>
                  <td class="p-2 w-1/5 font-bold border border-solid border-black">姓名</td>
                  <td class="p-2 w-1/5 border border-solid border-black">{{ member.memberName }}</td>
                  <td class="p-2 w-1/5 font-bold border border-solid border-black">性别</td>
                  <td class="p-2 w-1/5 border border-solid border-black">{{ member.genderType }}</td>
                  <td :rowspan="3" class="p-2 w-1/5 text-center align-middle border border-solid border-black">
                    （一寸照粘贴处）
                  </td>
                </tr>
                <tr>
                  <td class="p-2 font-bold border border-solid border-black">出生年月</td>
                  <td class="p-2 border border-solid border-black">{{ formatDate(member.birthDate,'YYYY年MM月') }}</td>
                  <td class="p-2 font-bold border border-solid border-black">民族</td>
                  <td class="p-2 border border-solid border-black">{{ member.nationalityDesc }}</td>
                </tr>
                <tr>
                  <td class="p-2 font-bold border border-solid border-black">籍贯</td>
                  <td class="p-2 border border-solid border-black">{{ member.birthPlace }}</td>
                  <td class="p-2 font-bold border border-solid border-black">入团时间</td>
                  <td class="p-2 border border-solid border-black">{{ formatDate(member.joinLeagueDate,'YYYY年MM月DD日') }}</td>
                </tr>
                <tr>
                  <td class="p-2 font-bold border border-solid border-black">文化程度</td>
                  <td class="p-2 border border-solid border-black">高中/本科</td>
                  <td class="p-2 font-bold border border-solid border-black">现任职务</td>
                  <td :colspan="2" class="p-2 border border-solid border-black">班长/团支书/其他</td>
                </tr>
                <tr>
                  <td :colspan="2" class="p-2 font-bold border border-solid border-black">何时何地提出入党申请</td>
                  <td :colspan="4" class="p-2 border border-solid border-black">
                    <div class="flex items-center justify-between">
                      <span>{{ formatDate(member.applicationForm?.signatureDate,'YYYY年MM月DD日') }}于东北大学软件学院提交入党申请</span>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td :colspan="5" class="p-2 text-center font-bold border border-solid border-black">本人简历</td>
                </tr>
                <tr class="text-center">
                  <td class="p-2 border border-solid border-black">自何年何月</td>
                  <td class="p-2 border border-solid border-black">至何年何月</td>
                  <td colspan="2" class="p-2 border border-solid border-black">在何地、何部门、任何职</td>
                  <td class="p-2 border border-solid border-black">证明人</td>
                </tr>
                <tr>
                  <td class="p-2 border border-solid border-black">2007年9月</td>
                  <td class="p-2 border border-solid border-black">2013年6月</td>
                  <td colspan="2" class="p-2 border border-solid border-black">某某小学 学生</td>
                  <td class="p-2 border border-solid border-black">王老师</td>
                </tr>
                <tr>
                  <td class="p-2 border border-solid border-black">2013年9月</td>
                  <td class="p-2 border border-solid border-black">2016年6月</td>
                  <td colspan="2" class="p-2 border border-solid border-black">某某中学 学生</td>
                  <td class="p-2 border border-solid border-black">李老师</td>
                </tr>
                <tr>
                  <td class="p-2 border border-solid border-black">2016年9月</td>
                  <td class="p-2 border border-solid border-black">2019年6月</td>
                  <td colspan="2" class="p-2 border border-solid border-black">某某中学 学生</td>
                  <td class="p-2 border border-solid border-black">张老师</td>
                </tr>
                <tr>
                  <td class="p-2 border border-solid border-black">&nbsp;</td>
                  <td class="p-2 border border-solid border-black">&nbsp;</td>
                  <td colspan="2" class="p-2 border border-solid border-black">&nbsp; </td>
                  <td class="p-2 border border-solid border-black">&nbsp;</td>
                </tr>
                <tr>
                  <td class="p-2 border border-solid border-black">&nbsp;</td>
                  <td class="p-2 border border-solid border-black">&nbsp;</td>
                  <td colspan="2" class="p-2 border border-solid border-black">&nbsp; </td>
                  <td class="p-2 border border-solid border-black">&nbsp;</td>
                </tr>
              
                <tr>
                  <td class="p-2 font-bold border border-solid border-black">何时何地受过何种奖励</td>
                  <td :colspan="4" class="p-2 border border-solid border-black">
                    无
                  </td>
                </tr>
                <tr>
                  <td class="p-2 font-bold border border-solid border-black">何时何地受过何种处分</td>
                  <td :colspan="4" class="p-2 border border-solid border-black">无</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <div id="section-branch-recommendation"
          class="mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-4 md:p-6">
          <div class="border border-solid border-black h-full">
            <table class="border-collapse h-full w-full">
              <tbody>
                <tr>
                  <td :colspan="2" class="p-2 w-[20px] font-bold border border-solid border-black text-center align-middle">
                    何时何地参加过团校和业余党校学习、成绩如何
                  </td>
                  <td :colspan="4"  class="p-2 border border-solid border-black ">
                    无
                  </td>
                 
                </tr>
                <tr>
                  <td class="p-2 w-[20px] font-bold border border-solid border-black text-center align-middle"
                    :rowspan="6" :colspan="2" >
                    上<br />学<br />年<br />成<br />绩
                  </td>
                  <td class="p-2 font-bold border border-solid border-black text-center">
                    课程名称
                  </td>
                  <td class="p-2 font-bold border border-solid border-black text-center">
                    成绩
                  </td>
                  <td class="p-2 font-bold border border-solid border-black text-center">
                    课程名称
                  </td>
                  <td class="p-2 font-bold border border-solid border-black text-center">
                    成绩
                  </td>
                </tr>
                <tr>
                  <td class="p-2 border border-solid border-black">高等数学</td>
                  <td class="p-2 border border-solid border-black text-center">92</td>
                  <td class="p-2 border border-solid border-black">大学英语</td>
                  <td class="p-2 border border-solid border-black text-center">88</td>
                </tr>
                <tr>
                  <td class="p-2 border border-solid border-black">数据结构</td>
                  <td class="p-2 border border-solid border-black text-center">95</td>
                  <td class="p-2 border border-solid border-black">计算机网络</td>
                  <td class="p-2 border border-solid border-black text-center">90</td>
                </tr>
                <tr>
                  <td class="p-2 border border-solid border-black">操作系统</td>
                  <td class="p-2 border border-solid border-black text-center">89</td>
                  <td class="p-2 border border-solid border-black">软件工程</td>
                  <td class="p-2 border border-solid border-black text-center">93</td>
                </tr>
                <tr>
                  <td class="p-2 border border-solid border-black">数据库原理</td>
                  <td class="p-2 border border-solid border-black text-center">91</td>
                  <td class="p-2 border border-solid border-black">编译原理</td>
                  <td class="p-2 border border-solid border-black text-center">87</td>
                </tr>
                <tr>
                  <td class="p-2 border border-solid border-black">算法分析</td>
                  <td class="p-2 border border-solid border-black text-center">94</td>
                  <td class="p-2 border border-solid border-black">Web开发技术</td>
                  <td class="p-2 border border-solid border-black text-center">96</td>
                </tr>

                <tr>
                  <td :colspan="2"  class="p-2 font-bold border border-solid border-black align-top text-center">
                    团支部推荐意见
                  </td>
                  <td :colspan="4" class="p-2 border border-solid border-black align-top">
                    <n-space vertical justify="space-between" class="min-h-[180px] h-full">
                      <div class="flex-grow text-justify">
                        {{ formatDate(member.activistRecommendation.branchRecommendDate ,'YYYY年MM月DD日')}}，经计算机类XXX班团支部召开团员大会研究决定，同意推荐{{ member.memberName }}作为入党积极分子、
                      </div>
                      <n-space vertical align="end" :size="4" class="font-songti">
                        <div class="font-kaiti">团支部书记：张XX</div>
                        <div class="flex items-center">
                          <n-tooltip v-if="getValidationInfo('branchRecommendDate')" trigger="hover">
                            <template #trigger>
                              <n-icon :size="16" :color="getLevelColor(getValidationInfo('branchRecommendDate').level)" class="mr-1.5">
                                <component :is="getIconComponent(getValidationInfo('branchRecommendDate').level)" />
                              </n-icon>
                            </template>
                            <span>{{ getValidationInfo('branchRecommendDate').message }}</span>
                          </n-tooltip>
                          {{ formatDate(member.activistRecommendation.branchRecommendDate ,'YYYY年MM月DD日') || '（日期未填写）' }}
                        </div>
                      </n-space>
                    </n-space>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <div id="section-committee-approval"
          class="mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-4 md:p-6">
          <div class="border border-solid border-black h-full">
            <table class="border-collapse h-full w-full">
              <tbody>
                <tr>
                  <td class="p-2 w-1/5 font-bold border border-solid border-black text-center align-top">
                    基层团委<br />（团总支）<br />审批意见
                  </td>
                  <td :colspan="4" class="p-2 border border-solid border-black align-top">
                    <n-space vertical justify="space-between" class="min-h-[140px]">
                      <div class="text-justify">
                       同意推荐。
                      </div>
                      <n-space vertical align="end" :size="4" class="font-songti">
                        <div class="font-kaiti">
                          （公章）基层团委（团总支）书记：李四
                        </div>
                        <div class="flex items-center">
                          <n-tooltip v-if="getValidationInfo('baseCommitteeApprovalDate')" trigger="hover">
                            <template #trigger>
                              <n-icon :size="16" :color="getLevelColor(getValidationInfo('baseCommitteeApprovalDate').level)" class="mr-1.5">
                                <component :is="getIconComponent(getValidationInfo('baseCommitteeApprovalDate').level)" />
                              </n-icon>
                            </template>
                            <span>{{ getValidationInfo('baseCommitteeApprovalDate').message }}</span>
                          </n-tooltip>
                          {{ formatDate(member.activistRecommendation?.baseCommitteeApprovalDate,'YYYY年MM月DD日') || '（日期未填写）' }}
                        </div>
                      </n-space>
                    </n-space>
                  </td>
                </tr>

                <tr>
                  <td class="p-2 w-1/5 font-bold border border-solid border-black text-center align-top">
                    校团委<br />审核意见
                  </td>
                  <td :colspan="4" class="p-2 border border-solid border-black align-top">
                    <n-space vertical justify="space-between" class="min-h-[140px]">
                      <div class="text-justify">同意推荐。</div>
                      <n-space vertical align="end" :size="4" class="font-songti">
                        <div class="font-kaiti">（公章）团委书记：王五</div>
                        <div class="flex items-center">
                          <n-tooltip v-if="getValidationInfo('schoolCommitteeReviewDate')" trigger="hover">
                            <template #trigger>
                              <n-icon :size="16" :color="getLevelColor(getValidationInfo('schoolCommitteeReviewDate').level)" class="mr-1.5">
                                <component :is="getIconComponent(getValidationInfo('schoolCommitteeReviewDate').level)" />
                              </n-icon>
                            </template>
                            <span>{{ getValidationInfo('schoolCommitteeReviewDate').message }}</span>
                          </n-tooltip>
                          {{ formatDate(member.activistRecommendation?.schoolCommitteeReviewDate,'YYYY年MM月DD日') || '（日期未填写）' }}
                        </div>
                      </n-space>
                    </n-space>
                  </td>
                </tr>

                <tr>
                  <td class="p-2 w-1/5 font-bold border border-solid border-black text-center align-top">
                    团支部关于其<br />确定为发展<br />对象的推荐意见
                  </td>
                  <td :colspan="4" class="p-2 border border-solid border-black align-top h-full">
                    <n-space vertical justify="space-between" class="h-full min-h-[180px]">
                      <div class="text-justify">
                        同意推荐。
                      </div>
                      <n-space vertical align="end" :size="4" class="font-songti">
                        <div class="font-kaiti">团支部书记：赵四</div>
                        <div class="flex items-center">
                          <n-tooltip v-if="getValidationInfo('developmentTargetDate')" trigger="hover">
                            <template #trigger>
                              <n-icon :size="16" :color="getLevelColor(getValidationInfo('developmentTargetDate').level)" class="mr-1.5">
                                <component :is="getIconComponent(getValidationInfo('developmentTargetDate').level)" />
                              </n-icon>
                            </template>
                            <span>{{ getValidationInfo('developmentTargetDate').message }}</span>
                          </n-tooltip>
                          {{ formatDate(member.activistRecommendation.developmentTargetDate,'YYYY年MM月DD日') || '（日期未填写）' }}
                        </div>
                      </n-space>
                    </n-space>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </n-space>
    </div>

    <div class="absolute top-4 right-4 w-64 z-10">
      <div class=" p-4 rounded-lg shadow-md">
       <n-anchor :bound="500">
          <n-anchor-link title="封面" href="#section-cover" />
          <n-anchor-link title="填写说明" href="#section-instruction" />
          <n-anchor-link title="基本信息" href="#section-basic-info" />
          <n-anchor-link title="团支部推荐" href="#section-branch-recommendation" />
          <n-anchor-link title="审批意见" href="#section-committee-approval" />
        </n-anchor>
      </div>
    </div>
   
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { NTooltip, NIcon, NAlert, NSpace, NAffix, NAnchor, NAnchorLink } from 'naive-ui'
import { formatDate } from '@/utils/dateUtils'

const props = defineProps({
  member: { type: Object, default: () => ({}) },
  validation: { type: Array, default: () => [] },
  scrollContainerRef: Object
})

import { getLevelColor, getIconComponent } from '@/utils/levelUtils.js'

// 验证信息处理逻辑
function getValidationInfo(key) {
  if (!props.validation || !Array.isArray(props.validation)) {
    return null
  }
  return props.validation.find(item => item.key === key)
}

// 日期格式化函数 - 统一为年月日格式


// 表单填写日期
const formFillDate = computed(() => {
  const date = props.member?.activistRecommendation?.formFillDate
  if (!date) return '日期未填写'
  return formatDate(date)
})
</script>

<style scoped>
.underline {
  text-decoration: underline;
}

.font-songti {
  font-family: "SimSun", "STSong", serif;
}
.font-kaiti {
  font-family: "KaiTi", "STKaiti", serif;
}

/* 表格样式 */
table {
  font-size: 14px;
}

td {
  vertical-align: top;
}
</style>